// index.js
const app = getApp()
// 引入 QQMapWX
const QQMapWX = require('../../libs/qqmap-wx-jssdk')
const qqmapsdk = new QQMapWX({
  key: 'A7CBZ-FZ73U-PUPV7-BINEG-ICD57-KAB6J'//申请的腾讯位置服务秘钥
})

Page({
  data: {
    cityname: '未选择',  // 保存当前城市名称
    cid: 1,      // 声明变量保存当前选中导航类别的id
    movies: []   // 保存当前电影列表
  },

  /** 当点击导航后执行 */
  tapNav(event){
    let cid = event.target.dataset.id;
    this.setData({cid});
    // 先去缓存中看一圈，有没有当前类别下的首页数据
    wx.getStorage({
      key: cid,
      success: (res)=>{  // 从缓存中读到了数据
        console.log(res)
        let movies = res.data;
        this.setData({movies});
      },
      fail: (err)=>{  // 没有从缓存中读到数据
        console.warn(err)
        // 发送http请求，获取相应类别下的电影列表
        this.loadData(cid, 0).then(movies=>{
          this.setData({movies})
          // 将movies数组存入storage缓存，下次直接用
          wx.setStorage({
            key: cid,
            data: movies
          })
        })
      }
    })
  },

  /**
   * 异步任务，发送请求获取相应的电影数组
   * @param {number} cid  类别ID
   * @param {number} offset   起始条目的下标
   */
  loadData(cid, offset){
    // 弹出等待框，等响应回来后应该取消等待框。
    wx.showLoading({
      title: '等待中，请稍后...',
      mask: true
    })
    return new Promise((resolve, reject)=>{
      wx.request({
        url: 'https://api.tedu.cn/index.php',
        data: {cid, offset},
        method: 'GET',
        success: (res)=>{
          // 回调resolve，将res.data交给Promise的使用者
          resolve(res.data)
          // 隐藏等待框
          wx.hideLoading();
        }
      })
    })
  },

  /** 加载当前城市名称，显示在左上角 */
  getLocation(){
    qqmapsdk.reverseGeocoder({
      success: (res)=>{
        console.log(res)
        // 从结果中解析出城市名称
        let city = res.result.address_component.city
        // 修改data.cityname  更新界面
        this.setData({cityname: city})
        // 存入globalData
        getApp().globalData.cityname = city;
      }
    })
  },

  onLoad() {
    // 加载当前城市
    this.getLocation();

    // 发送http请求，加载电影列表
    this.loadData(1, 0).then(movies=>{
      this.setData({movies})
    })
  },

  /** 回到index后执行该生命周期方法 */
  onShow(){
    let cityname = getApp().globalData.cityname;
    this.setData({cityname});
  },

  /** 当上拉触底时执行 */
  onReachBottom(){
    console.log('到底了...');
    // 整理请求参数cid与offset，发送请求，获取数据
    // 将返回的电影列表数据追加到data.movies后
    let cid = this.data.cid;
    let offset = this.data.movies.length;
    this.loadData(cid, offset).then(movies=>{
      let ms = this.data.movies;
      ms.push(...movies);
      this.setData({movies: ms});
    })
  },

  /** 当下拉刷新时执行 */
  onPullDownRefresh(){
    console.log('onPullDownRefresh...');
    // 直接发送请求，获取movies，更新页面与缓存
    this.loadData(this.data.cid, 0).then(movies=>{
      // 更新页面
      this.setData({movies})
      // 停止下拉刷新
      wx.stopPullDownRefresh()

      // 更新缓存
      wx.setStorage({
        key: this.data.cid+"",
        data: movies
      })
    })
  }
})
